<template>
  <div class="brand_container">
    <div class="top_box">
      <a-card style="width: 100%">
        <div>
          <div class="filter_search">
            <div>
              <a-icon type="search" />
              筛选搜索
            </div>
            <div class="btnbox">
              <a-button class="btnLeft"> 重置 </a-button>
              <a-button type="primary"> 查询搜索 </a-button>
            </div>
          </div>
          <div class="brand_box">
            品牌名称：<a-input
              class="inputLeft"
              placeholder="品牌名称"
              style="width: 200px"
            />
            <div>
              推荐状态：
              <a-select
                style="width: 200px"
                :allow-clear="true"
                @change="handleChange"
              >
                <a-select-option value="未推荐"> 未推荐 </a-select-option>
                <a-select-option value="推荐中"> 推荐中 </a-select-option>
              </a-select>
            </div>
          </div>
        </div>
      </a-card>
    </div>
    <div class="data_box">
      <a-card style="width: 100%">
        <div class="data_list">
          <div>
            <a-icon type="container" />
            数据列表
          </div>
          <div class="btnbox">
            <a-button size="small" class="btnLeft" @click="showModal">
              选择品牌
            </a-button>
          </div>
        </div>
      </a-card>
    </div>
    <div class="data_table">
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :row-selection="rowSelection"
        :pagination="pagination"
      >
        <span slot="id" slot-scope="id">{{ id }}</span>
        <span slot="brand_name" slot-scope="brand_name">{{ brand_name }}</span>
        <span
          slot="recommend"
          slot-scope="recommend"
        ><a-switch
          :checked="!!recommend"
          @change="onChange"
        /></span>
        <span slot="brand_sort" slot-scope="brand_sort">{{ brand_sort }}</span>
        <span slot="rec_state" slot-scope="rec_state">{{
          rec_state === 0 ? '未推荐' : '推荐中'
        }}</span>
        <span slot="action">
          <a-button type="link" size="small"> 设置排序 </a-button>
          <a-button type="link" size="small"> 删除 </a-button>
        </span>
      </a-table>
    </div>
    <div class="action_box">
      <a-select
        style="width: 200px"
        placeholder="批量操作"
        @change="handleChange"
      >
        <a-select-option value="设为推荐"> 设为推荐 </a-select-option>
        <a-select-option value="取消推荐"> 取消推荐 </a-select-option>
        <a-select-option value="删除"> 删除 </a-select-option>
      </a-select>
      <a-button type="primary" class="btnOK"> 确定 </a-button>
    </div>
    <div class="chooseBrand_box">
      <a-modal
        title="选择品牌"
        :visible="visible"
        :confirm-loading="confirmLoading"
        ok-text="确认"
        cancel-text="取消"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <div class="chooseBrand_data">
          <div class="brandSearch_box">
            <a-input-search
              placeholder="品牌名称搜索"
              style="width: 200px; margin-bottom: 20px"
              @search="onSearch"
            />
          </div>
          <div class="chooseBrand_table">
            <a-table
              :columns="columnsBrand"
              :data-source="chooseBrand_data"
              bordered
              :row-selection="rowSelection"
              :pagination="pagination"
            >
              <span slot="brand_name" slot-scope="brand_name">
                {{ brand_name }}</span>
            </a-table>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    width: '10%',
    scopedSlots: { customRender: 'id' },
    align: 'center'
  },
  {
    title: '品牌名称',
    dataIndex: 'brand_name',
    width: '30%',
    scopedSlots: { customRender: 'brand_name' },
    align: 'center'
  },
  {
    title: '是否推荐',
    dataIndex: 'recommend',
    width: '15%',
    scopedSlots: { customRender: 'recommend' },
    align: 'center'
  },
  {
    title: '排序',
    dataIndex: 'brand_sort',
    scopedSlots: { customRender: 'brand_sort' },
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'rec_state',
    scopedSlots: { customRender: 'rec_state' },
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '20%',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]

const columnsBrand = [
  {
    title: '品牌名称',
    dataIndex: 'brand_name',
    width: '40%',
    scopedSlots: { customRender: 'brand_name' },
    align: 'center'
  },
  {
    title: '相关',
    dataIndex: 'about_brand',
    scopedSlots: { customRender: 'about_brand' },
    align: 'center'
  }
]

const pagination = {
  pageSize: 5
}

import { getBrandList } from '@/api/marketing'
export default {
  data() {
    return {
      data: [],
      columns,
      pagination,
      ModalText: '',
      visible: false,
      confirmLoading: false,
      chooseBrand_data: [],
      columnsBrand
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            'selectedRows: ',
            selectedRows
          )
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  },
  created() {
    this.getBrandList()
  },
  methods: {
    onChange(checked) {
      console.log(`a-switch to ${checked}`)
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    },
    async getBrandList() {
      const { brand_item: res } = await getBrandList()
      this.data = res
      this.chooseBrand_data = res
    },
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 1000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    onSearch(value) {
      console.log(value)
    }
  }
}
</script>

<style lang="scss">
.brand_container {
  margin: 20px;

  .top_box,
  .data_box {
    margin-bottom: 20px;
  }

  .filter_search {
    display: flex;
    justify-content: space-between;
  }

  .btnLeft {
    margin-right: 10px;
  }

  .brand_box {
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-bottom: 20px;

    .inputLeft {
      margin-right: 40px;
    }
  }

  .data_list {
    display: flex;
    justify-content: space-between;
  }

  .action_box {
    margin-top: -45px;

    .btnOK {
      margin-left: 20px;
    }
  }

  .brandSearch_box {
    margin-bottom: 20px;
  }
}
</style>
